'use strict';

import React, {Component, PropTypes} from 'react';
import {Link} from 'react-router';
import {IMG} from '../res';
import {Area} from '../lib';

let activeStyle = {
	color: '#f8d347',
};
let linkStyle = {
	color: '#ffffff',
	fontSize: '1.4rem',
};
let liStyle = {
	listStyleType: 'none',
	margin: '10px 0',
};
const ROLE = ['督导室','联络员','组长','督学','镇教办','学校','督导室管理员','镇教办管理员','学校管理员'];

export default class SideBar extends Component {
	/*
	 * 构造函数。
	 *
	 * @param props 只读属性
	 */
	constructor(props) {
		super(props);
		this.state = {};
	}

	/*
	 * 渲染视图。
	 */
	render() {
		let list = [];
		let data = this.props.data;

		for (let i = 0; i < data.length; i++) {
			let li = {};

			if ('children' in data[i]) {
				let links = [];
				let children = data[i].children;

				for (let j = 0; j < children.length; j++) {
					links.push(
						<Link
							key={j}
							to={children[j].href}
							style={linkStyle}
							activeStyle={activeStyle}
							className="am-block"
						>{children[j].title}</Link>
					);
				}

				li = (
					<li
						key={i}
						style={liStyle}
					>
						<p className="am-text-sm am-margin-0">{data[i].title}</p>
						<div style={{
							backgroundColor: '#35404d',
							padding: '5px 10px',
						}}>{links}</div>
					</li>
				);
			} else {
				li = (
					<li 
						key={i}
						style={liStyle}
					>
						<Link 
							to={data[i].href}
							style={linkStyle}
							activeStyle={activeStyle}
						>{data[i].title}</Link>
					</li>
				);
			}

			list.push(li);
		}

		return (
			<div style={{
				backgroundColor: '#2a3542',
				width: this.props.width,
				height: document.body.scrollHeight - this.props.top,
				color: '#ffffff',
				position: 'fixed',
				top: this.props.top,
				padding: 15,
				overflowY: 'auto',
				WebkitOverflowY: 'auto',
				MozOverflowY: 'auto',
			}}>
				<p className="am-text-sm">
					<img src={IMG.flag} />
					{`欢迎${ROLE[parseInt(localStorage.role)]}：${localStorage.realname}`}
				</p>
				<p className="am-text-sm am-margin-left-sm">{Area.getNameById(JSON.parse(localStorage.area), parseInt(localStorage.areaId))}</p>
				<ul className="am-padding-0">{list}</ul>
			</div>
		);
	}
}

SideBar.propTypes = {
	data: PropTypes.array,
	width: PropTypes.number,
	top: PropTypes.number,
};
SideBar.defaultProps = {
	data: [],
	width: 100,
	top: 50,
};
